<template>
  <div class="tea-order">
    <div class="head" :class="{'printed': orderData.printingTimes > 0}">
      <div>
        <el-checkbox v-model="orderData.checked"></el-checkbox>
        <span class="span-item">
          <span class="c-606266">配送时间：</span>
          <span class="mlr-10">{{orderData.deliveryStartTime.slice(5,16) || '-'}}</span>
        </span>
        <span class="span-item">
          <span class="c-606266">下单时间：</span>
          <span class="mlr-10">{{orderData.orderTime.slice(5,25) || '-'}}</span>
        </span>
        <span class="span-item">
          <span class="c-606266">单号：</span>
          <span class="mlr-10">{{orderData.xmbzNo || '-'}}</span>
        </span>
        <span class="span-item">
          <span class="c-606266">分仓：</span>
          <span class="mlr-10">{{orderData.branchWarehouse || '-'}}</span>
        </span>
      </div>

      <div class="btns">
        <template v-if="[3,4].includes(orderData.productionState)">
          <el-button plain type="primary" size="mini" @click="onPrint" data-btn-type="print">打印<span v-if="orderData.printingTimes > 0">（{{orderData.printingTimes}}次）</span></el-button>
          <el-button plain type="primary" size="mini" @click="onPrintIngredient" data-btn-type="print">打印配料表</el-button>
          <el-button plain type="primary" size="mini" @click="onPrintOrder" data-btn-type="print">打印小票</el-button>
        </template>
        <el-button v-if="orderData.productionState == 3" type="danger" size="mini" @click="productionGoodsRollback">退回待生产</el-button>
        <el-button v-if="[2,9].includes(orderData.productionState)" type="primary" size="mini" @click="startProdution">开始生产</el-button>
        <el-button v-if="orderData.productionState == 3" type="primary" size="mini" @click="putInStorage">入库</el-button>
      </div>
    </div>

    <div class="main">
      <div class="main-left">
        <div class="d-f">
          <span class="col-item">
            <span class="c-606266">生产需求：</span>
            <span class="ml-20 mr-36 c-red fw-bold">{{orderData.productionNotes || '-'}}</span>
          </span>
          <span class="col-item">
            <span class="c-606266">客户备注：</span>
            <span class="ml-20 mr-36 c-red fw-bold">{{orderData.customerNotes || '-'}}</span>
          </span>
        </div>

        <div class="goods-box">
          <div class="c-606266 goods-list-label">商品清单：</div>
          <div class="goods-list" v-if="orderData.orderDetailVOS && orderData.orderDetailVOS.length">
            <div v-for="item in orderData.orderDetailVOS" :key="item.id" class="goods-item">
              <el-image class="goods-img" :src="item.mainPic"></el-image>
              <div>
                <div>{{item.goodsName}}  <span class="ml-10 fw-bold">x{{item.quantity}}</span></div>
                <!-- <div class="fz-12 c-999 mt-5">净含量：120g</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="main-right">
        <div class="status" :style="getStatusStyle()">{{ orderData.productionStateName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  singleStartProduction, //开始生产
  orderWarehousing, // 入库和批量入库
  productionGoodsRollbackApi, //退回生产中
} from "@/api/scheduling/prodManage";
import { statusColorMap } from '@/const'
export default {
  props: {
    orderData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
    };
  },
  methods: {
    startProdution() { // 开始生产
      const params = {
        orderId: this.orderData.id,
        producer: '未填写',
        carver: '未填写',
        packer: '未填写',
      }
      singleStartProduction(params).then(res => {
        if(res.data.code == 200) {
          this.$notify({
            title: '生产成功',
            message: '请您耐心等待',
            type: 'success'
          })
          this.$emit('onFetch')
        }
      })
    },
    getStatusStyle() {
      console.log(this.orderData.productionState)
      return {
        'border-color': statusColorMap[this.orderData.productionState],
        'color': statusColorMap[this.orderData.productionState],
      }
    },
    putInStorage() { // 入库
      this.$confirm('是否执行入库操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          orderId: this.orderData.id,
        }
        orderWarehousing(params).then(res => {
          if(res.data.code == 200) {
            this.$notify({
              title: '入库成功',
              message: '请您耐心等待',
              type: 'success'
            })
            this.$emit('onFetch')
          }
        })
      })
    },
    /**退回生产中*/
    productionGoodsRollback() {
      this.$confirm('确认退回待生产吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        productionGoodsRollbackApi({orderId: this.orderData.id}).then(res => {
          if(res.data.code == 200) {
            this.$notify({
              title: '退回待生产成功',
              message: '请您耐心等待',
              type: 'success'
            })
            this.$emit('onFetch')
          }
        })
      })
    },
    onPrint() {
      this.$emit('onPrint', {type: 'print', orderData: this.orderData})
    },
    onPrintIngredient() {
      this.$emit('onPrint', {type: 'printIngredient', orderData: this.orderData})
    },
    onPrintOrder() {
      this.$emit('onPrint', {type: 'printOrder', orderData: this.orderData})
    },
  }
};
</script>
<style lang="scss" scoped>
.tea-order {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-top: 20px;
  .head {
    background-color: #e7f6fd;
    padding: 15px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.printed {
      background-color: #fcf5e6;
    }
    .span-item {
      display: inline-block;
    }
    .btns {
      display: flex;
    }
  }
  .main {
    padding: 8px 38px 26px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .main-left {
      flex: 1;
      .col-item {
        flex: 1;
      }
      .goods-box {
        margin-top: 20px;
        display: flex;
        flex: 1;
        .goods-list-label {
          flex: none;
        }
        .goods-list {
          display: flex;
          flex-wrap: wrap;
          flex: 1;
          .goods-item {
            flex: 0 0 33%;
            display: inline-flex;
            align-content: center;
            margin-bottom: 20px;
            .goods-img {
              width: 50px;
              height: 50px;
              margin-right: 8px;
              border: 1px solid #eee;
            }
          }
        }
      }
    }
    .main-right {
      .status {
        width: 70px;
        height: 60px;
        border: 3px solid #409EFF;
        border-radius: 50% / 52%;
        color: #409EFF;
        transform:rotate(-15deg);
        text-align: center;
        line-height: 60px;
        font-size: 20px;
        font-weight: 550;
      }
    }
  }
}
</style>